<template>
  <div class="weboList">
    <el-row>
      <el-col :span="8"><el-input v-model="wd" placeholder="输入标题关键字搜索" @keyup.enter.native="submitSearch"></el-input></el-col>
      <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="submitSearch">搜索</el-button></el-col>
    </el-row>
    <el-row>
      <el-button type="primary" @click="$router.push({name: 'WeiboAuth'})">授权新微博</el-button>
    </el-row>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="wbList" stripe class="table">
      <el-table-column prop="appName" label="微博名称" className="is-left">
      </el-table-column>
      <el-table-column label="操作" className="is-center" width="200px">
        <template slot-scope="scope">
          <el-button type="text" @click="handleManageClick(scope.row)">管理微博</el-button>
          <el-button type="text" @click="selAppid=scope.row.appid;dialog=true">授权下发</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="授权下发" width="30%" :visible.sync="dialog" class="dialog_auth">
      用户：
      <el-autocomplete
        class="inline-input"
        v-model="authUser"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入用户关键字"
        :trigger-on-focus="false"
        @select="handleSelect"
      ></el-autocomplete>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAuthSave">保存</el-button>
        <el-button @click="dialog = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  export default {
    data () {
      return {
        wd: '',
        authUser: null,
        authUid: null,
        tbLoading: true,
        page: 1,
        size: 10,
        dialog: false
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState('weiboManage', {
        wbList: state => state.wbList
      }),
      ...mapState({
        userList: state => state.sysManage.users
      })
    },
    methods: {
      ...mapActions('weiboManage', ['getWbList', 'authToUser']),
      ...mapActions(['getUserList']),
      ...mapMutations(['SET_BREAD_TAIL']),
      // 初始化页面数据
      initPageData () {
        this.submitSearch()
      },
      // 搜索
      async submitSearch () {
        this.tbLoading = true
        await this.getWbList({
          wd: this.wd
        })
        this.tbLoading = false
      },
      // 获取匹配的授权用户
      async querySearchAsync (str, callback) {
        await this.getUserList({wd: str})
        const arr = this.userList.list.map(item => {
          return { 'value': item.realname + '（' + item.username + '）', id: item.uid }
        })
        callback(arr)
      },
      // 选择授权用户
      handleSelect (item) {
        this.authUid = item.id
      },
      // 保存授权
      async handleAuthSave () {
        const res = await this.authToUser({
          appid: this.selAppid,
          auid: this.authUid
        })
        if (res.data.code === 1) {
          this.$message.success('授权成功')
        }
      },
      handleManageClick (data) {
        this.SET_BREAD_TAIL(data.appName)
        this.$router.push({name: 'WeiboManage', params: {appid: data.appid, type: 'menu'}})
      }
    }
  }
</script>
<style lang="scss">
  .weboList{
    .el-row{margin-bottom:15px}
    .el-table{
      .img-wrap{position:relative;margin: 10px auto;width:85px;height:85px;}
      .img-wrap img{position:absolute;left:0;top:0;width:85px;vertical-align:top}
      .wechatQR{opacity:0;transition:opacity .5s;}
      .img-wrap:hover .wechatQR{opacity:1;}
      .nickName{font-size:14px;font-weight:700;}
      .nickName i{font-weight:500;color:#999;font-size:12px;}
    }
  }
</style>
